<template>
	<view class="infoWrap" :style="{background: showBgImg ? `url(${globalSheetSongListInfo.img})no-repeat 10% 10%` : ''}">
		<scroll-view scroll-y="true" class="scrollWrap">
			<view class="sheetheader">
				<image class="coverimg" :src="globalSheetSongListInfo.img" mode="aspectFit" ></image>
				<view class="sheetname">{{globalSheetSongListInfo.name}}</view>
				<view class="halfpxline" ></view>
			</view>
			<view class="detail">
				<view class="tagswrap">
					标签：
					<view v-if="globalSheetSongListInfo.tags.length <= 0">无</view>
					<view class="tagBox" v-if="globalSheetSongListInfo.tags.length > 0">
						<view class="tag" v-for="(item,index) in globalSheetSongListInfo.tags" :key="index">{{item}}</view>
					</view>
				</view>
				<view class="description">
					<text>{{globalSheetSongListInfo.description | textTransform}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { mapMutations, mapState } from 'vuex'
	export default {
		data() {
			return {
				showBgImg: false,
				sheetInfo: null
			}
		},
		computed:{
			...mapState(['globalSheetSongListInfo'])
		},
		methods: {
			...mapMutations(['updateGlobalSheetSongListInfo'])
		},
		onLoad() {
			setTimeout(()=>{
				this.showBgImg = true
			},800)
		}
	}
</script>

<style lang="scss" scoped>
.infoWrap {
	height: 100%;
	.scrollWrap {
		height: 100%;
		background: rgba(59, 59, 59, 0.5);
		backdrop-filter: blur(30px);
		.sheetheader {
			height: 40%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.coverimg {
				width: 350rpx;
				height: 350rpx;
				border-radius: 12px;
			}
			.sheetname {
				color: #FFF;
				margin: 60rpx auto;
				height: 10%;
				width: 80%;
				text-align: center;
				font-weight: 600;
			}
			.halfpxline {
				height: 2px;
				width:100%;
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
				background-image: radial-gradient(farthest-side at 50% 50%, #FFF, #CCC,transparent);
			}
		}
		.detail {
			height: 60%;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			flex-direction: column;
			color: #FFF;
			padding: 20rpx 40rpx;
			font-size: 26rpx;
			.tagswrap {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 26rpx;
				margin-bottom: 26rpx;
				.tagBox {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.tag {
						width: 90rpx;
						text-align: center;
						border: 1px solid #CCCCCC;
						background-color: rgba(162, 162, 162, .31);
						color: #FFFFFF;
						border-radius: 20px;
						margin-right: 15rpx;
					}
				}
			}
			.description {
				color: #FFF;
			}
		}
	}
}
</style>
